<template>
  <div class="erro">
    <div class="content">
      <template v-if="$store.state.user.userStatus === '404'">
        <!-- <img src="/static/imgs/404.png" alt="404未找到页面" /> -->
        <p class="subTitle">页面找不到家，走丢了...</p>
      </template>
      <template v-else>
        <!-- <img src="/static/imgs/500.png" alt="500服务器出错了" /> -->
        <p class="subTitle">服务器发烧了，正在输液...</p>
      </template>
      <el-button type="primary" class="goBackHome" @click="goHome()">返回首页</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'error',
  data () {
    return {}
  },
  methods: {
    // 返回首页
    goHome () {
      this.$router.push('/')
    }
  }
}
</script>
<style lang="less" scoped>
.erro {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  .content {
    text-align: center;
    img {
      width: 80%;
    }
    .subTitle {
      margin-top: 25px;
      color: #999999;
      font-size: 26px;
    }
    .goBackHome {
      margin: 25px;
      margin-bottom: 35px;
      font-size: 18px;
    }
  }
}
</style>
